<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="description" content="CSS3 animate图片自动渐入渐出效果 >> 张鑫旭-鑫空间-鑫生活" />
		<meta name="description" content="张鑫旭web前端学习实例页面" />
		<meta name="keywords" content="张鑫旭,张鑫旭-鑫空间-鑫生活,web前端,css,jQuery,javascript,demo页面" />
		<meta name="author" content="张鑫旭,zhangxixnu" />
		<title>CSS3 animate图片自动渐入渐出效果 &gt;&gt; 张鑫旭-鑫空间-鑫生活</title>
		<link rel="stylesheet" href="../css/demo.css" type="text/css" />
		<link rel="stylesheet" href="../css/hl.css" type="text/css" />
		<style>
			@-webkit-keyframes fadeInOut {
				0% {
					opacity: 1;
				}
				25% {
					opacity: 0;
				}
				50% {
					opacity: 0;
				}
				75% {
					opacity: 1;
				}
			}
			
			.anim_fade_image {
				position: absolute;
				-webkit-animation-name: fadeInOut;
				-webkit-animation-timing-function: ease-in-out;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-duration: 12s;
				-webkit-animation-direction: alternate;
			}
		</style>
	</head>

	<body>
		<div id="header">
			<a href="http://www.zhangxinxu.com/" class="logo" title="回到鑫空间-鑫生活首页">
				<img alt="张鑫旭-鑫空间-鑫生活" src="http://www.zhangxinxu.com/php/image/zxx_home_logo.png" border="0" />
			</a>
		</div>
		<div id="main">
			<h1>CSS3 animate图片自动淡入淡出效果实例页面(Safari/Chrome)</h1>
			<div id="body">
				<div id="code" class="part">
					<h3>代码：</h3>
					<div class="show">
						<h5>CSS代码：</h5>
						<pre name="code" class="css">
@-webkit-keyframes fadeInOut {
    0% {
        opacity:1;
     }
    25% {
        opacity:0;
    }
    50% {
        opacity: 0;    
    }
    75% {
        opacity:1;
    }
}
.anim_fade_image {
    position:absolute;    
    -webkit-animation-name: fadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 12s;
    -webkit-animation-direction: alternate;
}
                </pre>
						<h5>HTML代码：</h5>
						<pre name="code" class="html">
&lt;img class="trans_fade_image" src="http://image.zhangxinxu.com/image/study/p/s200/ps6.jpg" />
&lt;img src="http://image.zhangxinxu.com/image/study/p/s200/ps4.jpg" />
                </pre>
					</div>
				</div>
				<div id="effect" class="part">
					<h3>效果：</h3>
					<div class="show">
						<div id="testBox" class="demo">
							<img class="anim_fade_image" src="http://image.zhangxinxu.com/image/study/p/s200/ps6.jpg" />
							<img src="http://image.zhangxinxu.com/image/study/p/s200/ps4.jpg" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/hl_all.js"></script>
		<script type="text/javascript">
			DlHighlight.HELPERS.highlightByName("code", "pre");

			(function() {
				var oImage = document.getElementById("testBox").getElementsByTagName("img");
				oImage[0].onclick = function() {
					var cl = this.className;
					if(/click/.test(cl)) {
						this.className = "trans_fade_image";
					} else {
						this.className = "trans_fade_image trans_fade_image_click";
					}
				};
			})();
		</script>
		<div id="footer">
			Designed &amp; Powerd by
			<a href="http://www.zhangxinxu.com/">zhangxinxu</a><br /> Copyright© 张鑫旭-鑫空间-鑫生活<br>
			<a href="http://www.miibeian.gov.cn/" target="_blank">鄂ICP备09015569号</a>
			<script type="text/javascript">
				var _gaq = _gaq || [];
				_gaq.push(['_setAccount', 'UA-11205167-1']);
				_gaq.push(['_trackPageview']);

				(function() {
					var ga = document.createElement('script');
					ga.type = 'text/javascript';
					ga.async = true;
					ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
					var s = document.getElementsByTagName('script')[0];
					s.parentNode.insertBefore(ga, s);
				})();
			</script>

		</div>
		<div id="ad">
			<script type="text/javascript">
				google_ad_client = "pub-0090627341039040";
				google_ad_slot = "2041257798";
				google_ad_width = 468;
				google_ad_height = 60;
			</script>
			<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
		</div>
	</body>

</html>